<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding:0;
            list-style:none;
        }
        .lunbo{
            margin: 100px auto;

            width:800px;
            height:500px;
            background-color:#ccc;
            overflow: hidden;
        }
        .btns{
            position:absolute;
            width: 800px;
            height:500px;
            z-index:1;
        }
        .btns div {
            position: absolute;
            width: 50px;
            height: 50px;
            top:0;
            bottom:0;
            margin: auto;
            font-size: 50px;
            font-weight: bold;
            color: white;
            text-align: center;
            cursor: pointer;
        }
        .btns .left{
            left:0;
            text-align: left;
        }
        .btns .right{
             right:0;
            text-align: right;
         }
        .lunbo .list{

            transition-duration: 0.8s;
        }
        .lunbo li,
        .lunbo li img{
            float:left;
            width:800px;
            height:500px;
        }
    </style>
</head>
<body>

<!--轮播盒子-->
<div class = "lunbo">

    <!--左右按钮-->
    <div class = "btns">
        <div class = "left"> < </div>
        <div class = "right"> > </div>
    </div>

    <!--轮播图片列表-->
    <ul class = "list"></ul>

</div>
<script>
    /*
    * 轮播图
    * 1.写布局
    * 2.调整位置：调整ul的位置，因为ul列表包裹着这些图片，ul列表移动，轮播图也就跟着动了(relative left/translateX)
    *
    * */
    //根据数据渲染内容 先向后台请求数据，根据数据生成页面，并且这个页面还能满足以下逻辑
    let imgList = [ //用一个数组模拟后台返回来的数据
        "./imgs/01.jpg",
        "./imgs/02.jpg",
        "./imgs/03.jpg",
        "./imgs/04.jpg",
        "./imgs/05.jpg",
    ]

    let length = imgList.length
    let ul = document.querySelector(".list")
    let leftBtn = document.querySelector(".left")
    let rightBtn = document.querySelector(".right")

    let current = 0 //表示当前显示的是第几张 当前第0张

    function init(){ //根据imgList初始化页面
        let str = ""
        imgList.forEach(item => {
            str += `<li><img src = "${item}"></li>` //将数组中每个被遍历到的元素添加进li标签
        })
        ul.style.width = `${800 * length}px` //ul列表的宽度随着数组的长度的变化而变化
        ul.innerHTML = str //最后将添加好的内容渲染出来
    }
    init()

    rightBtn.onclick = function (){
        current++ //修改状态 需要判断边界
        if(current >= length){
            current = length - 1
        }
        ul.style.transform = `translateX(${-800 * current}px)` //渲染状态
    }
    leftBtn.onclick = function (){
        current-- //修改状态
        if(current <= 0){
            current = 0
        }
        ul.style.transform = `translateX(${-800 * current}px)` //渲染状态
    }




</script>
</body>
</html>